<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="shortcut icon" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/logo.png"/>
	<title>{{.shop.name}}</title>
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/app.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css" rel="stylesheet" />
</head>
<style type="text/css">
*{touch-action: none}
body { margin-bottom: 50px; }
html,body{width:100%;overflow:hidden}
	/*placeholder属性*/
	::-webkit-input-placeholder { /* WebKit browsers */
	    color:#888;
	    font: 12px/1.5 arial,'Hiragino Sans GB','Microsoft YaHei','\5b8b\4f53',sans-serif!important;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	    color:#888;
	    font: 12px/1.5 arial,'Hiragino Sans GB','Microsoft YaHei','\5b8b\4f53',sans-serif!important;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	    color:#888;
	    font: 12px/1.5 arial,'Hiragino Sans GB','Microsoft YaHei','\5b8b\4f53',sans-serif!important;
	}
	:-ms-input-placeholder { /* Internet Explorer 10+ */
	    color:#888;
	    font: 12px/1.5 arial,'Hiragino Sans GB','Microsoft YaHei','\5b8b\4f53',sans-serif!important;
	}
	input[type=search]{
		background: rgba(245,245,245,0.9);
	}
	.shop{
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
	}
	.shop:before{
		content: "";
		position: absolute;
		width: 100%; height: 100%;
		background-color: rgba(0,0,0,0.1);
		top: 0; left: 0;z-index: 9
	}
	.shop>div { overflow: auto;position: relative;z-index: 11 }
	.mui-slider-item{border-bottom: 0 !important}
	.mui-scroll{width: 100%  !important;}
	/*.mui-content{padding-bottom: 50px;}*/
	#sliderSegmentedControl .mui-scroll .mui-active{color:#e54242 !important;border-bottom: 2px solid #e54242 !important}
	.mui-scroll .mui-control-item{width: calc(100% / 3) !important;float: left !important;padding: 0 !important;}
	.mui-scroll .mui-control-item dl{width: 100%;text-align: center;}
	.mui-scroll .mui-control-item dl dt{height: 25px ;line-height: 25px;font-size: 16px;width: 100%}
	.mui-scroll .mui-control-item dl dd{height: 20px ;line-height: 20px;font-size: 14px;width: 100%}
	#sliderSegmentedControl{height: 47px !important;background: #fff}
	.mui-slider-group{top: 47px !important}
	#itemmobile .mui-table-view-cell{width: 50%;float: left;padding: 0}
	.mui-table-view-cell{padding: 0}
	#itemmobile .mui-table-view-cell dl{width: 100%;}
	.mui-table-view-cell:after{height: 0}
	#slider{top: 114px;}
	.rcmdPrdList,.PrdLineStyle{padding-bottom: 50px;}
	.noproduct{height: calc(100vh - 164px);background: url('/static/wechat/img/noproduct.png') no-repeat;background-size: 63%;background-position: center;}
	.focus{color:#e54242 !important;background: #fff !important}

	#price{position: relative;}
	#pirce dt{position: relative;}
	#price .iconfont{font-size: 6pt !important;margin: 0 !important;}
	#price #down{position: absolute;bottom:calc(6pt - 12px);left: 0}
	#price #up{position: absolute;top:calc(6pt - 12px);left: 0}
	#price dt div{position: absolute;height: 40px;width:6pt;top: 0;left: calc(50% + 10pt + 3px);}
	.mui-segmented-control.mui-scroll-wrapper .mui-scroll{height: 45px !important;}
	.mui-slider-item{overflow: hidden;}
	#itemmobile{border: 0}
	.rcmdPrdList dl{position: relative;}
	.rcmdPrdList dl i.iconfont{color:#e54242;position:absolute;bottom: 10px;right:5px;font-size: 18pt}
	.PrdLineStyle .goto{position: relative;}
	.PrdLineStyle .goto .scadd{color:#e54242;position:absolute;bottom: 8px;right:13px;font-size: 18pt}
	#gznum{background-color: rgb(0,0,0,0);padding: 0}
	/*.mui-content{position: relative;}*/
	#header .mui-input-clear{width: 90%;float: left;}
	#search {display: flex;align-items: center;}
	#search .back {
	    font-size: 18px;font-weight: 600;margin-right: 10px
	}
	#qrscan{margin-left: 10px;color: #333;font-size: 20pt;}
	.footlist i{font-size: 20px;color: #e54242;margin-right: 2px;position: relative;top: 2px}
	.shopfoot{z-index: 11}
	.shopclassification{z-index: 12}
	.shopclassification ul{left: calc(100vw - 185px)}
	.shopclassification .pic{left: calc(100vw - 50px)}
</style>
<body>
<div class="mui-content">
<header id="header" class="mui-bar mui-bar-transparent fabsearch" >
    <form method="get" id="search"  action="/mobile/index/shop_search">
    	<div class="back iconfont icon-fanhui1" onclick="history.go(-1)"></div>
        <input type="search" name="keywords" class="mui-input-clear" placeholder="输入商品名称">
        <i class="iconfont" id="qrscan">&#xe74d;</i>
        <input type="hidden" name="id" value="{{.shop.bid}}">
    </form>
</header>
<div class="shop" style="background-image: url({{if .shop.gzhpath}}{{.shop.gzhpath}}{{else}}{{.shop.pathname}}{{end}})">
	<div>
		<img class="logo" src="{{.shop.pathname}}">
		<div>
			<p class="overpl1">{{.shop.name}}</p>
			<p><span id="gznum">{{.shop.fnum}}</span>人关注</p>
			<!-- <p><span>民营企业</span> 0 人关注</p> -->
		</div>
		<span id="focus" class="{{if eq .shop.isfocus 1}}focus{{end}}" data-status="{{.shop.isfocus}}"><i class="iconfont">{{if eq .shop.isfocus 1}}&#xe79e;{{else}}&#xe79f;{{end}}</i> 关注</span>
	</div>
</div>
		<div id="slider" class="mui-slider mui-fullscreen">
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<a class="mui-control-item mui-active" data-munber='{{.all}}' href="#itemmobile" data-status='0'>
						<dl>
							<dt>全部商品</dt>
							<dd>{{.all}}</dd>
						</dl>
					</a>
					<a class="mui-control-item" data-munber='{{.news}}' href="#item1mobile" data-status='1'>
						<dl>
							<dt>上新</dt>
							<dd>{{.news}}</dd>
						</dl>
					</a>
					<a class="mui-control-item" data-munber='{{.hot}}' href="#item2mobile" data-status='2'>
						<dl>
							<dt>热销</dt>
							<dd>{{.hot}}</dd>
						</dl>
					</a>
				</div>
			</div>
		<div class="mui-slider-group">
			<div id="itemmobile" class="mui-slider-item mui-control-content mui-active">
				<div id="scroll1" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="filter">
							<dl class="ac sort" data-status=''>
								<dt>综合<i class="iconfont"></i></dt>
								<!-- <dd></dd> -->
							</dl>
							<dl class="sort" data-status='1' id="price">
								<dt>价格 <div><i class="iconfont" id="up">&#xe700;</i>
										<i class="iconfont" id="down">&#xe701;</i></div></dt>
								<!-- <dd></dd> -->
							</dl>
							<dl class="sort" data-status='2'>
								<dt>销量</dt>
								<!-- <dd></dd> -->
							</dl>
							<dl class="sort" data-status='3'>
								<dt>最新</dt>
								<!-- <dd></dd> -->
							</dl>
						</div>
						<ul class="mui-table-view all rcmdPrdList ">
							<!-- {{range $k,$v:=.info}}
							<li class="mui-table-view-cell goto" data-price="{{$v.price}}" data-sellnum="{{$v.sellnum}}" data-sort="{{$k}}" data-addtime="{{$v.addtime}}">
								<dl>
									<dt class="go" href="/mobile/column/product_content?id={{$v.id}}">
										<img src="{{$v.pathname}}" alt="">
									</dt>
									<dd>
										<p>{{$v.title}}</p>
										<p>{{if $v.vprice}}
										<span>&yen; {{$v.vprice}}</span><s>&yen; {{$v.price}}</s>
										{{else}}
										<span>&yen; {{$v.price}}</span>
										{{end}}</p>
										<p>好评率{{$v.hp}}%</p>
									</dd>
									<i class="iconfont scadd" data-id="{{$v.id}}" >&#xe619;</i>
								</dl>
							</li>
							{{end}} -->
							<div class="noproduct" style="display: block;">
							</div>
						</ul>
					</div>
				</div>
			</div>	
			<div id="item1mobile" class="mui-slider-item mui-control-content">
				<div id="scroll2" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view all PrdLineStyle">
						<div class="noproduct" style="display: block;">
						</div>
						</ul>
					</div>
				</div>
			</div>			
			<div id="item2mobile" class="mui-slider-item mui-control-content">
				<div id="scroll3" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view all PrdLineStyle">
						<div class="noproduct" style="display: block;">
						</div>
						</ul>
					</div>
				</div>
			</div>				
		</div>
	</div>
<nav class="mui-bar mui-bar-tab shopfoot">
	<div class="footlist">
		<a id="fl"><i class="iconfont">&#xe7a0;</i>返回顶层</a>
		<a class="goto" href="/mobile/shopcar"><i class="iconfont">&#xe775;</i>查看购物车</a>
	</div>
	<a class="lx goto">
		<span class="iconfont">&#xe805;</span>
		<p>客服</p>
	</a>
</nav>
<div class="shopclassification">
	<ul>
		{{range .gid}}
		<a class="goto" href="/mobile/contact_service?id={{.id}}"><li>{{.monicker}}</li></a>
		{{end}}
	</ul>
	<img class="pic" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/di.png">
</div>

<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.pullToRefresh.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.pullToRefresh.material.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
{{template "wechat/public/share.html" .}}
<script>
	function isWeiXin() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			return true;
		} else {
			return false;
		}
	}
	var page = [1,1,1]
	var isclick = false
	function shopPro (index,sort) {
		$.ajax({
			url: "/mobile/index/shopProduct",
			data: {id:{{.shop.id}},bid:{{.shop.bid}},status:index,sort:sort,page:page[index]},
			success: function (data) {
				isclick = true
				var res = data.info
				if (res) {
					var html = ""
					for (var v of res) {
						if (index==0) {
							html += `<li class="mui-table-view-cell goto"><dl>
									<dt class="go" href="/mobile/column/product_content?id=`+v.id+`">
										<img src="`+v.pathname+`" alt="">
									</dt>
									<dd>
										<p>`+v.title+`</p><p>`
										if (v.vprice) {
											html += `<span>&yen; `+v.vprice+`</span><s>&yen; `+v.price+`</s>`
										} else {
											html += `<span>&yen; `+v.price+`</span>`
										}
										html += `</p><p>好评率`+v.hp+`%</p>
									</dd>
								<i class="iconfont scadd" data-id="`+v.id+`" data-minbuy="`+v.minbuy+`" >&#xe619;</i>
								</dl></li>`
						} else {
							html += `<li class="mui-table-view-cell goto"><dl>
									<dt class="go" href="/mobile/column/product_content?id=`+v.id+`">
										<img src="`+v.pathname+`" alt="">
									</dt>
									<dd>
									<p>`+v.title+`</p><p>`
									if (v.keywords){
										for(var j=0;j<v.keywords.length;j++){
											html+=`<span>`+v.keywords[j]+`</span>`
										}
									}
									var price=v.price
									if(v.vprice){
										price=v.vprice
									}
									html+=`</p><p><span><span>&yen;</span>`+price+`</span>`+v.sellnum+`人购买</p> </dd>
								<i class="iconfont scadd" data-id="`+v.id+`" data-minbuy="`+v.minbuy+`" >&#xe619;</i>
								</dl></li>`
						}
					}
					if (page[index]==1) {
						html += `<div class="noproduct" style="display: block;"></div>`
						$(".mui-table-view").eq(index).html(html)
					} else {
						$(".noproduct").eq(index).before(html)
					}
					if ($('.mui-table-view li').length>0) {
						$('.noproduct').eq(index).css('display','none')
					}
					page[index] ++
					freshchange()
				} else {
					if (page[index]>1) {
						mui.toast("没有更多了!")
					}
				}
			},
			error:function(xhr,type,errorThrown){
                mui.toast("网络繁忙~")
            }
		})
	}

	$('#qrscan').click(function(){
		if(isWeiXin()){
			wx.scanQRCode({
			needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
			scanType: ["barCode"], // 可以指定扫二维码还是一维码，默认二者都有
			success: function (res) {
				var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果	
				$.ajax({
					url:'/mobile/product_barcode',
					data:{barcode:result.split(",")[1],gid:$('input[name="id"]').val()},
					success:function(res){
						if(res==0){
							mui.alert("本商城暂无此商品~")
						}else{
							window.location.href="/mobile/column/product_content?id="+res
						}
					}
				})
				}
			});
		}else{
			mui.alert("手机版网页暂无此功能,请移步到微信公众号,小程序或者APP~","提示")
		}
	})
	$('#fl').click(function(){
		$('.mui-slider-item.mui-active .mui-scroll-wrapper').scrollTop(0)
	})
	$('.lx').click(function(){
		$('.shopclassification').css('display','block')
	})
	$('.shopclassification').click(function(){
		$(this).css('display','none')
	})	
	function freshchange(){

		// $('.scadd').unbind('click')
		// $('.go').unbind('click')
		$('.go').click(function(){
			var ul=this.getAttribute("href")
			if(ul){
				window.location.href=ul
			}
		})
		$('.scadd').click(function(){
			var pid=this.getAttribute("data-id")
			var minbuy=this.getAttribute("data-minbuy")
			var data={num:1,pid:pid,minbuy:minbuy}
			mui.get("/mobile/isshopcar",{pid:pid},function(res){
				console.log(res)
				if (minbuy>1 && !res.isshopcar) {
					mui.confirm("该产品的最小购买数为"+minbuy,"提示",["否","是"],function(res){
						if (res.index==1) {
							mui.post('/mobile/shopcar',data,function(res){
								if(res==2||res==962){
									mui.confirm("您还未登入,请先登入","提示",function(res){
										if(res.index){
											mui.closePopups()
											window.location.href="/mobile/login"
										}
									})
								}else if(res==1){
									mui.toast("添加成功~")
								}else if(res==0){
									mui.toast("网络繁忙,请重试!")
								}else if(res==3){
						          mui.toast('库存不足');
						        }
							})
						} else {
							console.log(res)
						}
					},"div")
				} else {
					mui.post('/mobile/shopcar',data,function(res){
						if(res==2||res==962){
							mui.confirm("您还未登入,请先登入","提示",function(res){
								if(res.index){
									mui.closePopups()
									window.location.href="/mobile/login"
								}
							})
						}else if(res==1){
							mui.toast("添加成功~")
						}else if(res==0){
							mui.toast("网络繁忙,请重试!")
						}else if(res==3){
				          mui.toast('库存不足');
				        }
					})
				}
			})
		})
		// mui('body').on('click','.scadd',function(e){
		// 	stopPropagation(e)
			
		// })
	}
	
	var sort='';
	$('.sort').click(function(){
		if (isclick) {
			isclick = false
			sort=$(this).attr('data-status')
			if (sort=='1'){
				$(this).attr('data-status',	0)
				$('#down').css('color','#333')
				$('#up').css('color','#e31939')
			}else if(sort=='0'){
				$(this).attr('data-status',1)
				$('#up').css('color','#333')
				$('#down').css('color','#e31939')
			}else if(sort==''||sort=='2'||sort=='3'){
				$('#up').css('color','#333')
				$('#down').css('color','#333')
			}
			$('.sort').attr('class','sort')
			$(this).attr('class','sort ac')
			page[0] = 1
			shopPro(0,sort)
		}
	})
	// function sort(){
	// 	if($('.rcmdPrdList .goto').length==0){
	// 		$('.rcmdPrdList .noproduct').css('display','block')
	// 	}else{
	// 	var arr=[]
	// 	$('.rcmdPrdList .goto').each(function(){
	// 		arr.push(this)
	// 	})
	// 	switch(status){
	// 		case "":
	// 		arr.sort(function(a,b){return parseInt(a.getAttribute('data-sort')) -  parseInt(b.getAttribute('data-sort'))});
	// 		break;
	// 		case "0":
	// 		arr.sort(function(a,b){return parseFloat(b.getAttribute('data-price')) - parseFloat(a.getAttribute('data-price'))});
	// 		break;
	// 		case "1":
	// 		arr.sort(function(a,b){return parseFloat(a.getAttribute('data-price')) - parseFloat(b.getAttribute('data-price'))});
	// 		break;
	// 		case "2":
	// 		arr.sort(function(a,b){return parseInt(b.getAttribute('data-sellnum')) -  parseInt(a.getAttribute('data-sellnum'))});
	// 		break;
	// 		case "3":
	// 		arr.sort(function(a,b){return Date.parse(new Date(b.getAttribute('data-addtime'))) -  Date.parse(new Date(a.getAttribute('data-addtime'))) });
	// 		break;
	// 	}
	// 	$('.rcmdPrdList').html('')
	// 	for(var i=0;i<arr.length;i++){
	// 		$('.rcmdPrdList').append(arr[i])
	// 	}
	// 	}

	// }
	function attention (e) {
		$.ajax({
			url:window.location.href,
			type:'post',
			success:function(res){
				if (res==1){
					$('#focus')[0].className= e==1?"":"focus"
					mui.toast(e==1?"取消关注成功~":"关注成功~")
					var num= e==1?parseInt($('#gznum').html())-1:parseInt($('#gznum').html())+1
					$('#gznum').html(num)
					$('#focus').attr("data-status", e==1?Math.abs(e-1):Math.abs(e+1))
				}else if(res==2){
					mui.confirm("您还未登入,请先登入","提示",function(data){
						if(data.index){
							mui.closePopups()
							window.location.href="/mobile/login"
						}
					})
				}else{
					mui.toast("网络繁忙,请稍后再试~")
				}
			}
		})
	};

	$('#focus').click(function(){
		var status=this.getAttribute("data-status");
		var that=this;
		if (status==1){	
			mui.confirm("您确定要取消关注吗?","提示",function(data){
				if(data.index){
					mui.closePopups()
					attention(status)
				}
			})
		}else{
			attention(status)
		}
	})
    mui.init({
        swipeBack:true, //启用右滑关闭功能
         pullrefresh:(function($) {
            //阻尼系数
            var deceleration = 0.0009;
            $('.mui-scroll-wrapper').scroll({
                bounce: false,
                indicators: false, //是否显示滚动条
                deceleration:deceleration
            });
            $.ready(function() {
                //循环初始化所有下拉刷新，上拉加载。
                $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
                    $(pullRefreshEl).pullToRefresh({
                        up: {
                        	contentinit:null,
                        	contentdown:null,
                        	contentnomore:null,
                        	auto:true,
                            callback: function() {
                            	// shopPro(index, sort)
                                var self = this;
                                var ul = self.element.querySelector('.mui-table-view');
                                var li;
                                $.ajax({
                                    url:"/mobile/index/shopProduct",
                                    data:{page:page[index],status:index,bid:{{.shop.bid}},id:{{.shop.id}}},
                                    success: function(data) {
                                    	isclick = true
                                    	var res=data.info
                                    	var k=0
                                		var godom=ul.querySelectorAll('li')
                                		if(godom.length>0){
                                			if(index==0){
                                				k=parseInt(godom[godom.length-1].getAttribute('data-sort'))
                                			}
                                		}
                                    	if (res) {
											var html = ""
											for (var v of res) {
												if (index==0) {
													html += `<li class="mui-table-view-cell goto"><dl>
															<dt class="go" href="/mobile/column/product_content?id=`+v.id+`">
																<img src="`+v.pathname+`" alt="">
															</dt>
															<dd>
																<p>`+v.title+`</p><p>`
																if (v.vprice) {
																	html += `<span>&yen; `+v.vprice+`</span><s>&yen; `+v.price+`</s>`
																} else {
																	html += `<span>&yen; `+v.price+`</span>`
																}
																html += `</p><p>好评率`+v.hp+`%</p>
															</dd>
														<i class="iconfont scadd" data-id="`+v.id+`" data-minbuy="`+v.minbuy+`" >&#xe619;</i>
														</dl></li>`
												} else {
													html += `<li class="mui-table-view-cell goto"><dl>
															<dt class="go" href="/mobile/column/product_content?id=`+v.id+`">
																<img src="`+v.pathname+`" alt="">
															</dt>
															<dd>
															<p>`+v.title+`</p><p>`
															if (v.keywords){
																for(var j=0;j<v.keywords.length;j++){
																	html+=`<span>`+v.keywords[j]+`</span>`
																}
															}
															var price=v.price
															if(v.vprice){
																price=v.vprice
															}
															html+=`</p><p><span><span>&yen;</span>`+price+`</span>`+v.sellnum+`人购买</p> </dd>
														<i class="iconfont scadd" data-id="`+v.id+`" data-minbuy="`+v.minbuy+`" >&#xe619;</i>
														</dl></li>`
												}
											}
											if (page[index]==1) {
												html += `<div class="noproduct" style="display: block;"></div>`
												$(".mui-table-view")[index].innerHTML=html
											} else {
												$(".noproduct")[index].insertAdjacentHTML('beforebegin',html)
											}
											if ($('.mui-table-view li').length>0) {
												$('.noproduct')[index].style.display = 'none'
											}
											page[index] ++
											freshchange()
											self.endPullUpToRefresh();
                                        }else{
                                        	var node=self.element.parentNode.getElementsByClassName('mui-pull-bottom-tips')[0]
                                        	node.parentNode.removeChild(node)
                                        	if(page>1){	
                                        		mui.toast("没有更多了!")
                                        	}
                                        	if(ul.querySelectorAll('li').length==0){
                                        		ul.getElementsByClassName('noproduct')[0].style.display='block'
                                        	}
                                        }
                                    },
                                    error:function(xhr,type,errorThrown){
                                        mui.toast("网络繁忙~")
                                    }
                                });
                            }
                        }
                    });
                });
            });
        })(mui)
    });
function stopPropagation(e) {  
    if (e.stopPropagation) {  
        e.stopPropagation();  
    } else {  
        e.cancelBubble = true;  
    }  
}  

    //释放 nav 底部导航 a 链接
</script>
<div class="mt-statistics">统计代码</div>
</body>
</html>